<template>
  <div class="box-card" :style="{width}">
    <div :class="{top:true,'top-backcolor1': isCurrent, 'top-backcolor2': !isCurrent}" >
      <div>
        <div><i class="el-icon-d-arrow-left" @click="yearMonthAddOrSub(0)"></i></div>
        <div><i class="el-icon-arrow-left" @click="yearMonthAddOrSub(2)"></i></div>
      </div>
      <div>
        <h3>{{month}}月</h3>
        <h5>{{ year }}</h5>
      </div>
      <div>
        <div><i class="el-icon-arrow-right" @click="yearMonthAddOrSub(3)"></i></div>
        <div><i class="el-icon-d-arrow-right" @click="yearMonthAddOrSub(1)"></i></div>
      </div>
    </div>
    <div class="body">
      <div>
        <ul>
          <li>Mon</li>
          <li>Tue</li>
          <li>Wed</li>
          <li>Thu</li>
          <li>Fri</li>
          <li>Sat</li>
          <li>Sun</li>
        </ul>
      </div>
      <div>
        <ul>
          <li :class="{'body-borderColor1': isCurrent,'body-borderColor2': !isCurrent,
            // active: i - getDay(year,month) + 1 === date ? true : false,
            signed: signData.at(i - getDay(year,month)) === '1' ? true : false,
            unsigned: signData.at(i - getDay(year,month)) === '1' ? false : true,
            empty: i - getDay(year,month) + 1 > boundary || i - getDay(year,month) < 0 ? true : false}"
              v-for="i in 7" @click="changeDate(i - getDay(year,month) + 1)">
            {{i >= getDay(year,month) ? i - getDay(year,month) + 1 : ''}}
          </li>
        </ul>
        <ul v-for="key in line - 1">
          <li :class="{'body-borderColor1': isCurrent,'body-borderColor2':!isCurrent,
            // active: i + (7 - getDay(year,month) + 1) + (key - 1) * 7 === date ? true : false,
            signed: signData.at(i + (7 - getDay(year,month) + 1) + (key - 1) * 7) === '1' ? true : false,
            unsigned: signData.at(i + (7 - getDay(year,month) + 1) + (key - 1) * 7) === '1' ? false : true,
            empty: i + (7 - getDay(year,month) + 1) + (key - 1) * 7 > boundary ? true : false}"
              v-for="i in 7"
          @click="changeDate(i + (7 - getDay(year,month) + 1) + (key - 1) * 7)">
            {{i + (7 - getDay(year,month) + 1) + (key - 1) * 7 <= getDays(year,month) ? i + (7 - getDay(year,month) + 1) + (key - 1) * 7 : ''}}
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom">
      <button>打卡</button>
      <button @click="toToday">今天</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "PunchCalendar",
  props: {
    width: {
      type: String,
      default: '300px'
    },
    // 签到数据
    signData: {
      type: String,
      required: true
    },
    // 本月连续签到天数
    count: {
      type: Number
    },
    // 签到天数
    signDays: {
      type: Number
    }
  },
  computed: {
    line() {
      let days = this.getDays(this.year,this.month)
      let day = this.getDay(this.year,this.month)
      return Math.ceil((days - (7 - day + 1)) / 7) + 1
    }
  },
  data() {
    return {
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      date: new Date().getDate(),
      boundary: new Date().getDate(),
      isCurrent: true,
    }
  },
  methods: {
    /**
     * 改变年月
     * @param type
     */
    yearMonthAddOrSub(type) {
      if (type === 0) {
        // 年份减, 小于1时，按钮禁用
        if (this.year === 1) {
          return;
        }
        this.year -= 1
      } else if (type === 1) {
        // 年份加，理论上无限制
        this.year += 1
      } else if (type === 2) {
        // 月份减， 小于1时，按钮禁用
        if (this.month === 1) {
          return
        }
        this.month -= 1
      } else {
        // 月份加， 大于12时，按钮禁用
        if (this.month === 12) {
          return
        }
        this.month += 1
      }
      let now = new Date()
      if (this.year === now.getFullYear() && this.month - 1 === now.getMonth()) {
        this.isCurrent = true
      } else {
        this.isCurrent = false
      }

      if (this.year < now.getFullYear() || (this.year == now.getFullYear() && this.month < now.getMonth() + 1)) {
        this.boundary = this.getDays(this.year, this.month)
      } else {
        this.boundary = now.getDate()
      }

      this.$emit('getSignData', this.year,this.month)
    },
    /**
     * 获取指定年月的1号是星期数
     * @param year
     * @param month
     */
    getDay(year, month) {
      return new Date(year, month - 1, 1).getDay()
    },
    /**
     * 获取某年某月有多少天
     * @param year
     * @param month
     */
    getDays(year,month) {
      let m31 = [1,3,5,7,8,10,12]
      let m30 = [4,6,9,11]
      if (m31.indexOf(month) !== -1) {
        return 31
      } else if (m30.indexOf(month) != -1) {
        return 30
      } else {
        if (this.isLeap(year)) {
          return 29
        } else {
          return 28
        }
      }
    },
    /**
     * 判断某年是否是闰年
     * 1. 既可以被100整除又可以被400整除的数
     * 2. 不可以被100整除，但是可以被4整除的数
     * @param year
     */
    isLeap(year) {
      if (year % 100 === 0) {
        if (year % 400 === 0) {
          return true
        } else {
          return false
        }
      } else {
        if (year % 4 === 0) {
          return true
        } else {
          return false
        }
      }
    },
    /**
     * 跳转到今天
     */
    toToday() {
      let now = new Date()
      this.year = now.getFullYear()
      this.month = now.getMonth() + 1
      this.date = now.getDate()
    },
    /**
     * 改变日期
     * @param date
     */
    changeDate(date) {
      this.date = date
    }
  },
  mounted() {
    this.$emit('getSignData', this.year,this.month)
  }
}
</script>

<style scoped>
.box-card {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  user-select: none;
  -webkit-user-select: none; /* Safari*/
  -moz-user-select: none; /* Firefox*/
  -ms-user-select: none;  /* IE Edge*/
  border-radius: 6px;
}

.top {
  display: flex;
  height: 50px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.top-backcolor1 {
  background-color: #6ac13c;
}
.top-backcolor2 {
  background-color: #a8a8a8;
}
.top > div:nth-child(1) {
  display: flex;
  flex: 1;
}
.top > div:nth-child(1) > div {
  flex: 1;
  text-align: center;
  line-height: 50px;
}
.top > div:nth-child(1) > div > i {
  cursor: pointer;
}
.top > div:nth-child(2) {
  flex: 4;
  font-family: Arial;
  font-weight: bold;
  color: #3d3d3d;
}
.top > div:nth-child(2) > h3 {
  height: 35px;
  line-height: 35px;
  text-align: center;
}
.top > div:nth-child(2) > h5 {
  height: 15px;
  line-height: 15px;
  text-align: center;
}
.top > div:nth-child(3) {
  display: flex;
  flex: 1;
}
.top > div:nth-child(3) > div {
  flex: 1;
  text-align: center;
  line-height: 50px;
}
.top > div:nth-child(3) > div > i {
  cursor: pointer;
}

.body {
  box-sizing: border-box;
  padding: 0px 5px 5px 5px;
}
.body ul{
  display: flex;
}
.body ul > li {
  flex: 1;
  text-align: center;
  font-family: Arial;
}
.body > div:nth-child(1) li {
  height: 28px;
  line-height: 28px;
  color: grey;
  font-weight: bold;
}
.body > div:nth-child(2) li {
  border-radius: 50%;
  margin: 0 3px 3px 0;
  width: 38px;
  height: 38px;
  line-height: 38px;
  font-size: 12px;
}
.body-borderColor1 {
  border: 1px solid #6ac13c;
}
.body-borderColor2 {
  border: 1px solid #a8a8a8;
}
/* 选中颜色 */
.active {
  background-color: #00aae7;
}
/* 已签到颜色 */
.signed {
  background-color: #6ac13c;
}
/* 未签到颜色 */
.unsigned {
  background-color: red;
}
.empty {
  background-color: transparent;
}

.bottom {
  display: flex;
  justify-content: flex-end;
}
.bottom > button {
  margin: 8px 5px;
  outline: none;
  border: 1px solid #3d3d3d;
  cursor: pointer;
  background-color: #6ac13c;
  border-radius: 3px;
  padding: 2px 4px;
}
</style>